<template>
	<div class="user_setting">
		<head-title title="设置--安全设置"></head-title>
		<el-card>
			<el-form :model="passwordForm" :rules="passwordFormRules" ref="passwordForm" label-width="120px">
				<div class="password-view">
					<p class="title">用户设置</p>
					<el-form-item label="新密码:" prop="password"><el-input placeholder="请输入新密码" v-model="passwordForm.password" show-password></el-input></el-form-item>
					<el-form-item label="确认新密码:" prop="confirm_password">
						<el-input placeholder="请确认密码" v-model="passwordForm.confirm_password" show-password></el-input>
					</el-form-item>
					<el-button type="primary" style="margin-left: 120px;" @click="submit('passwordForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			passwordForm: {
				password: '',
				confirm_password: ''
			},
			passwordFormRules: {
				password: [{ required: true, message: '请输入新密码' }],
				confirm_password: [{ required: true, message: '请确认密码' }]
			}
		};
	},
	methods: {
		submit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$http(this.$ApiList.UpPassword, this.passwordForm).then(res => {
						if (res.code == 200) {
							this.$layer.msg('修改成功');
							location.reload()
						}
					});
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		}
	},
	created() {}
};
</script>
<style>
.user_setting .password-view {
	width: 400px;
}
</style>
